<template>
	<view>
		<view class="content">
			<view class="pothon" v-for="(item) in 20" @click="pothon">
				<view class="pt"></view>
				<view class="pt2">
						<text class="t1">{{text1}}</text>
						<text class="t2">{{pingfe}}</text>
						<text class="t3">{{text2}}</text>
						<text class="t4">{{text3}}</text>
						<text class="t5">{{text4}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"mhuan",
		data() {
			return {
				text1:'万人之上',
				pingfe:'8.7分',
				text2:'其它',
				text3:'知音漫客',
				text4:'动漫小说，使用动漫画风格作为插画的一种娱乐性文学作品，以十多岁的中学、高中生的少男少女为主要读者群取向。其风格多样，场景变幻如同日本或者韩国/香港/台湾漫画中迤逦一般。读者群为喜爱漫画的年轻人。',
			};
		},
		methods:{
			pothon(){
				uni.navigateTo({
					url:'../../new/read/read'
				})
			},
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 90%;
		margin-left: 5%;
	}
	.pothon{
		width: 100%;
		height: 120px;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #ededed;
		margin-bottom: 10px;
	}
	.pt{
		padding-top: 5px;
		width: 30%;
		height: 90%;
		border-radius: 10px;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F16%2F20210216062048_c8dcc.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675588769&t=02a9e0e2acdfa548ac1600d3efc2d808');
	}
	.pt2{
		width: 60%;
		height: 100%;
		margin-left: 5%;
		box-sizing: border-box;
		position: relative;
		z-index: -1;
	}
	text{
		display: block;
		line-height: 20px;
	}
	.t1{
		font-size: 18px;
	}
	.t2{
		width: 40px;
		height: 20px;
		position: absolute;
		top: 0%;
		left: 75%;
		color: #dc7f46;
	}
	.t3,.t4,.t5{
		color: #999999;
	}
	.t4{
		margin: 5px 0px;
		font-size: 16px;
	}
	.t3{
		font-size: 12px;
		width: 40px;
		height: 20px;
		background-color: #eaebed;
		border-radius: 50px;
		text-align: center;
		margin-top: 10px;
	}
	.t5{
		display: -webkit-box;
		  overflow: hidden;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		  font-size: 14px;
	}
</style>